<template>
  <div class="login-container">
    <div class="login-right">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <span class="login-span">
          <div class="title-container">
            <img
              src="http://pinda.itheima.net/static/img/logo1.2459363d.png"
              alt=""
            >
          </div>

          <el-form-item prop="account" class="el-form-item">
            <el-input
              ref="username"
              v-model="loginForm.account"
              prefix-icon="el-icon-user"
              placeholder="Username"
              name="username"
              type="text"
              tabindex="1"
            />
          </el-form-item>

          <el-form-item prop="password" class="el-form-item">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              prefix-icon="el-icon-key"
              :type="passwordType"
              placeholder="Password"
              name="password"
              tabindex="2"
              @keyup.enter.native="handleLogin"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>

          <el-form-item class="el-form-item" prop="code">
            <el-input
              v-model="loginForm.code"
              style="width: 324px"
              prefix-icon="el-icon-lock"
            />
            <!-- <img :src="`data:image/png;base64,${url}`" alt="" @click="aaa()"> -->
            <img :src="`data:image/png;base64,${url}`" @click="getUserCode()">
          </el-form-item>

          <el-button
            class="login-buton"
            :loading="loading"
            type="primary"
            style="width: 100%; margin-bottom: 30px"
            @click.native.prevent="handleLogin"
          >立即登录</el-button>
        </span>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getCode } from '@/api/user'
export default {
  name: 'Login',
  data() {
    return {
      url: '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',
      input: '',
      loginForm:
      {
        'account': 'admin',
        'code': '',
        'key': '1',
        'password': 'admin'
      },
      loginRules: {
        account: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' }
        ], code: [
          { required: true, trigger: 'blur', message: '验证码不能为空' }
        ]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getUserCode()
  },
  methods: {
    async getUserCode() {
      const res = await getCode({ key: this.loginForm.key })
      console.log(res)
      this.url = res
      console.log(this.url)
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    async handleLogin() {
      await this.$refs.loginForm.validate()
      console.log(this.loginForm)
      await this.$store.dispatch('user/login', this.loginForm)
      this.$router.push('/')
    }
  }
}
</script>
<style lang="scss">
$bg: #454545;
$light_gray: #454545;
$cursor: #454545;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 54px;
    width: 95%;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    line-height: 54px;
    position: relative;
    font-size: 14px;
    color: #454545;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding-left: 25px;
    overflow: hidden;

    .login-form {
      position: absolute;
      top: 40%;
      left: 78%;
      margin: -180px 0 0 -160px;
      width: 463px;
      height: 440px;
      padding: 36px 0;
      background: #fff;
      border-radius: 3px;
    }

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 54px;
      caret-color: $cursor;
      width: 387px;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }

    }
  }
}
</style>
<style lang="scss" scoped>
.login-container {
  height: 100%;
  width: 100%;
  position: relative;

  .login-right {
    background: url(./images/background.902e6b43.png) 100% no-repeat;
    background-size: 100% 100%;
    width: 65%;
    height: 100%;
  }
  img{
    display: inline-block;
    width: 120px;
    height: 54px;
    vertical-align: top;
    cursor: pointer;
    z-index: 99999;

  }
  .login-form {
    position: absolute;
    top: 40%;
    left: 78%;
    margin: -180px 0 0 -160px;
    width: 463px;
    height: 440px;
    padding: 36px 0;
    background: #fff;
    border-radius: 3px;
  }

  .el-icon-user {
    position: absolute;
    line-height: 54px;
    font-size: 20px;
    padding-left: 12px;
    padding-right: 26px;
  }
  .el-icon-key {
    position: absolute;
    line-height: 54px;
    font-size: 20px;
    padding-left: 12px;
    padding-right: 26px;
  }
  .el-icon-lock {
    position: absolute;
    line-height: 54px;
    font-size: 20px;
    padding-left: 12px;
    padding-right: 16px;
  }

  .login-span {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
  }

  .tips {
    font-size: 14px;
    color: #283443;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .title-container {
    position: relative;
    margin-bottom: 53px;
    text-align: center;

    .title {
      font-size: 26px;
      color: black;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
    margin-right: 30px;
  }

  .login-buton {
    width: 100%;
    height: 54px;
    margin-bottom: 14px;
    margin-top: 33px;
    background-image: linear-gradient(
      to right,
      rgb(217, 46, 44),
      rgb(248, 110, 43)
    );
    border: 0px;
    font-size: 20px;
  }

  .el-form-item__content {
    width: 398px !important;
  }
}
.el-input__inner {
  width: 398px;
  position: relative;
  margin-left: 48px;
  line-height: 54px;
  height: 54px !important;
  border-radius: 5px;
}
</style>
